import React from 'react';
import {
  Upload, Button, message, Alert,notification, Space
} from 'antd';
import 'antd/dist/antd.css';
import ReactDOM from 'react-dom';
import axios from 'axios'
import {
  FileOutlined,
} from '@ant-design/icons';

class Demo extends React.Component {
  state = {
    fileList: [],
    uploading: false,
  }

  handleUpload = () => {
    const { fileList } = this.state;
    const formData = new FormData();
    formData.append('file', fileList[0]);
    formData.append('file', fileList[1]);
    formData.append('file', fileList[2]);
    formData.append('file', fileList[3]);
    formData.append('file', fileList[4]);
    formData.append('file', fileList[5]);
    formData.append('file', fileList[6]);
    formData.append('file', fileList[7]);
    formData.append('file', fileList[8]);
    formData.append('file', fileList[9]);
    this.setState({
      uploading: true,
    });
    axios.post('/uploadpic'+'?token='+this.getCookie("token"), formData, {
      'Content-type': 'multipart/form-data',
    }).then((response)=>{
        console.log(response.data);
        if (response.data.state) {
          this.loginSuccess('success');
          this.setState({
          fileList:[],
          uploading: false,
        })
        }else{
          this.loginError('error');
          this.setState({
            uploading: false,
          });
        ;}
    }, err => {
      console.log("失败");
      alert("上传失败");
      this.setState({
        uploading: false,
      });
    })
  }
  loginError = type => {
    notification[type]({
      message: '未登录！',
      description:
        '此功能登录后才能使用',
    });
  };  
    loginSuccess = type => {
      notification[type]({
        message: '上传成功！',
        description:
          '可在服务器截图栏进行查看',
      });
    };
    getCookie(cname) {
      var name = cname + "=";
      var decodedCookie = decodeURIComponent(document.cookie);
      var ca = decodedCookie.split(';');
      for(var i = 0; i <ca.length; i++) {
          var c = ca[i];
          while (c.charAt(0) == ' ') {
              c = c.substring(1);
           }
           if (c.indexOf(name) == 0) {
              return c.substring(name.length, c.length);
           }
       }
      return "";
  } 
  render() {
    
    const { uploading, fileList } = this.state;
    const props = {
      onRemove: (file) => {
        this.setState((state) => {
          const index = state.fileList.indexOf(file);
          const newFileList = state.fileList.slice();
          newFileList.splice(index, 1);
          return {
            fileList: newFileList,
          };
        });
      },
      beforeUpload: (file) => {
        this.setState(state => ({
          fileList: [...state.fileList, file],
        }));
        return false;
      },
      fileList,
    };

    return (
      <div>
        <p>可以多选，但是最多上传10张,多出来的图片会上传失败</p>
        <p>发现有人上传se图之类的，会重新加入审核功能</p>
        <br /><br />
        <Upload {...props}
          multiple={true}
          maxCount={3}>
          <Button>
            <FileOutlined type="upload" /> 选择文件
          </Button>
        </Upload>
        <Button
          type="primary"
          onClick={this.handleUpload}
          disabled={fileList.length === 0}
          loading={uploading}
          style={{ marginTop: 16 }}

        >
          {uploading ? '上传中' : '开始上传'}
        </Button>
        
      </div>
    );
  }
}
export default Demo;
